<template>
  <div class="notification-message-page">
    <div class="search-wrapper">
      <super-search :search-form="searchForm" :search-item-config="searchItemList" @search="searchHandle"></super-search>
    </div>
    <div class="content-wrapper">
      <a-list class="list" item-layout="horizontal" :pagination="true" :style="{ height: `${tableHeight}px` }" :data-source="tableData">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta :description="item.noticeContent">
              <template #title>
                <h3>{{ dayjs(Number(item.noticeTime)).format("YYYY-MM-DD HH:mm:ss") }}</h3>
              </template>
              <!-- <template #avatar>
                <a-avatar class="avatar" src="http://tttx-test.oss-cn-shenzhen.aliyuncs.com/oss/20240906/1831977246088294401.png" />
              </template> -->
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "NotificationMessage"
};
</script>
<script lang="ts" setup>
import TableHeightHook from "@/hook/tableHeightHook";
import dayjs from "dayjs";
import { searchItemList } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const { tableHeight } = TableHeightHook(-40);
const { searchForm, tableData, loading } = InitHook();
const { searchHandle } = OperationHook({ searchForm, tableData, loading });
searchHandle();
</script>
<style lang="stylus" scoped>
.list{
    overflow: auto;
    :deep(.ant-list-item-meta-description){
        font-weight: 600;
    }
}
.avatar{
    animation: turn 2s linear infinite;
}
@keyframes turn {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(72deg);
    }

    40% {
        transform: rotate(144deg);
    }

    60% {
        transform: rotate(216deg);
    }

    80% {
        transform: rotate(288deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>
